<template>
    <div ref="echart"> </div>
</template>  
<script>
import * as echarts from 'echarts'

export default {
    props:{
        isAxisChart:{   
                type: Boolean,
                default: true
        },
        chartData:{
                type: Object,       
                default() {
                    return {
                        xData: [],
                        series: []
                    }
                }
        }
    },  
    watch:{
            chartData:{
                handler: function (){
                        this.initChart()
                }, 
                deep: true      
            }

    },
    methods:{
        initChart(){
            this.initChartData() 
            if (this.echart){
                this.echart.setOption(this.options)
            }else{
                this.echart = echarts.init(this.$refs.echart)
                this.echart.setOption(this.options)

            }
         }, 
         initChartData(){
            if(this.isAxisChart){
                this.axisOption.xAxis.data = this.chartData.xData
                this.axisOption.series = this.chartData.series
            }else{
                this.normalOption.series = this.chartData.series
            }
        }
        },

    data()  {
        return {
                axisOption: {
                // 图例文字颜色
                textStyle: {
                    color: "#333",
                },
                grid: {
                left: "20%",
                },
                // 提示框
                tooltip: {
                trigger: "axis",
                },
                xAxis: {
                type: "category", // 类目轴
                data: [],
                axisLine: {
                    lineStyle: {
                    color: "#17b3a3",
                    },
                },
                axisLabel: {
                    interval: 0,
                    color: "#333",
                },
                },
                yAxis: [
                {
                    type: "value",  
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                },
                ],
                color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
                series: [],
            },
            normalOption:{
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [],
                },
                echart: null
                }
    },
    computed: {
        options () { 
            return this.isAxisChart ? this.axisOption : this.normalOption
          }
    }
}
</script>
    